<template>
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" size="24" />
    </template>
  </van-cell>

  <user-card-list :user-list="userList" :loading="loading"/><!--vue的驼峰命名可以使用'-'来转换-->
  <van-empty v-if="!userList || userList.length < 1" description="数据为空" />
</template>

<script setup lang="ts">
import {onMounted, ref, watchEffect} from 'vue';
import {Toast} from 'vant';
import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios";
import UserCardList from "../components/UserCardList.vue";
import {UserType} from "../models/user";

const route = useRoute();
const isMatchMode = ref<boolean>(false);
const loading = ref(true);
const userList = ref([]);


const loadData = async () => {
  let userListData;
  loading.value = true;
  // 心动模式，根据标签匹配用户
  if (isMatchMode.value) {
    const num = 10;
    userListData = await myAxios.get('/user/match', {// Make a request for a user with a given ID
      params: {
        num,
      },
    })
        .then(function (response) {
          // handle success
          console.log('/user/match succeed', response);
          return response ?.data;
        })
        .catch(function (error) {
          // handle error
          console.error('/user/match error', error);
          Toast.fail('失败')
        })
  } else {
    // 普通模式，直接根据分页查询用户
    userListData = await myAxios.get('/user/recommend', {// Make a request for a user with a given ID
      params: {
        pageNum : 1,
        pageSize : 8,
      },
    })
        .then(function (response) {
          // handle success
          console.log('/user/recommend succeed', response);
          return response ?.data?.records;
        })
        .catch(function (error) {
          // handle error
          console.error('/user/recommend error', error);
          Toast.fail('失败')
        })
  }
  if (userListData) {
    userListData.forEach((user : UserType) => {
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;
}



// 变化时重新加载方法
watchEffect(() => {
  loadData();
})
</script>

<style scoped>

</style>